import React, { Component  } from 'react';
import Chakan from '../../components/Popover/lunbo/chakan'
import Tianjia from '../../components/Popover/lunbo/tianjia'
import Delete from '../../gonggong/delete'
import { Layout, Breadcrumb, Table, Space} from 'antd';
import axios from 'axios'
import {nanoid} from 'nanoid'
const { Header, Content, Footer } = Layout;

class index extends Component {
  state={
    data:[],
    date:null,
    display:"none",
    canshu:{
      url:"http://localhost:3001/api/lunbodelete",
      gengxin:this.gengxin,
      title:"删除图片",
      tixing:"您将要删除这张轮播图，确定吗？",
    }
  }
  componentDidMount(){
    axios.get("http://localhost:3001/api/lunbo").then((req,res)=>{
      let data=[]
      req.data.url.map((i,index)=>{
        data[index]={
          key:nanoid(),
          name:i
        }
      })
      if (data.length==0) {
        data=[{key:nanoid(),name:"空"}]
        this.setState({
          data,
          display:"none"
        })
      }else{
      this.setState({
        data,
        display:"block"
      })
    }
      })
      const d = new Date()
      const nian=d.getFullYear()
      const yue=d.getMonth()+1
      const ri=d.getDate()
      const shi=d.getHours()
      const fen=d.getMinutes()
      const date=nian+"年"+yue+"月"+ri+"日"+shi+"时"+fen+"分"
      this.setState({
        date
      })
  }
  gengxin=()=>{
      this.componentDidMount()
  }
  render() {
    const columns = [
      {
        title: 'URL',
        dataIndex: 'name',
        key: 'name',
        width:"980px",
        ellipsis:true,
        render: text => <a>{text}</a>,
      },
      {
        title: 'Action',
        key: 'action',
        render: (text, record) => {
          // console.log(record);
         return (<Space size="middle">
             <Chakan record={record.name} name="查看"/>
             <Tianjia  gengxin={this.gengxin}   name="添加"/>
             <Delete canshu={this.state.canshu} gengxin={this.gengxin} url={text.name} name="删除" display={this.state.display}/>
          </Space>)
        },
      },
    ];

    const {data,date} = this.state
    return (
      <Layout className="site-layout">
        <Header className="site-layout-background" style={{ padding: 0 }} />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>home</Breadcrumb.Item>
            <Breadcrumb.Item>轮播图管理</Breadcrumb.Item>
          </Breadcrumb>
          <div className="site-layout-background" style={{ padding: 24, minHeight: 360 }}>
            <Table columns={columns} dataSource={data} />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>数据更新时间：{date}</Footer>
      </Layout>

    );
  }
}

export default index;